<template>
	<div id="header">
		<div class="tabBox">
			<ul class="tabList" ref="tabList">
				<li class="tabItem" :class="{active:nowTab==i}" v-for="(v,i) in tabList" :key="i">
					<span @click="pageChange(v.id,i,$event)">{{v.typeName}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script type="text/javascript">

	export default {
		props:["tabList"],
		data(){
			return {
				nowTab:0,
			}
		},
		methods:{
			pageChange(typeId,i,e){
				if(this.nowTab == i) return;
				this.nowTab = i;
				setTimeout(()=>{
					this.listSlider(e);
				},20)
				this.$emit("tabChange",typeId);
			},
			listSlider(e){
				let halfWindowW = window.innerWidth / 2;      			  // 窗口的一半宽度
				let listW = this.$refs.tabList.scrollWidth;      			// list的宽度
				let listScrollLeft = this.$refs.tabList.scrollLeft;   // list现在的滑动位置
				let halfEOffsetWidth = e.target.offsetWidth / 2;      // 当前点击dom的一半自身宽度
				let eFffsetLeft = e.target.offsetLeft;    						// 当前点击dom距离hk左边的距离（这是固定的）
				let maxScrollLeft = listW - halfWindowW * 2;          // 最大的滑动距离
				let lastLeft = (eFffsetLeft - halfWindowW + halfEOffsetWidth).toFixed(0); // list最终滑动到的位置

				if(lastLeft < 0){
					lastLeft = 0;
				}else if(lastLeft > maxScrollLeft){
					lastLeft = maxScrollLeft;
				}
				let num = 0;
				let tabInterval = (lastLeft - listScrollLeft) / 10;
				let timer = setInterval(()=>{
					listScrollLeft += tabInterval;
					this.$refs.tabList.scrollLeft = listScrollLeft;
					num += 1;
					if(num >= 10){
						clearInterval(timer);
					}
				},10)
			}
		}
	}
</script>

<style lang="less" scoped>
	#header{
		.tabBox{
			width:100%;
			height:0.44rem;
			background:#fff;
			line-height:0.46rem;
			border-bottom: 1px solid #e8e8e8;
			overflow:hidden;
			.tabList{
				white-space:nowrap;
				overflow-x:scroll;
				height:0.5rem;
				-webkit-overflow-scrolling: touch;
				.tabItem{
					display: inline-block;
					padding:0 0.12rem;
					color:#666;
					font-size:0.14rem;
					&.active{
						font-size:0.16rem;
						font-weight: bold;
						color:#31c27c;
					}
				}
			}
		}
	}
</style>
